<!--
 * @Description: 地图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:25:47
-->
<template>
  <div>
    <div ref="map" style="height: 400px"></div>
  </div>
</template>
<script>
import { get } from '@/utils/request'
export default {
  data() {
    return {};
  },
  methods:{
      //获取设备的经纬度
      async getEmp() {
      let res = await get('/dashboard/findEngineerDeviceTree')
      // console.log(res,'----');
      let temp = []
      //遍历res.data的children获得经纬度数组
      res.data.forEach((item) => {
        item.children.forEach((it) => {
          temp.push(it)
          // console.log(temp,'----');
          this.empData = temp
        })
      })
      this.drawMap()
    },
    drawMap() {
      var map = new AMap.Map(this.$refs.map, {
        mapStyle: 'amap://styles/normal', //设置地图的显示样式
        zoom: 11, //级别
        center: [113.10685,25.790414], //中心点坐标
        viewMode: '3D', //使用3D视图
      })
      this.empData.forEach((item) => {
        var marker = new AMap.Marker({
          position: item.position, //位置
          icon: 'http://webapi.amap.com/theme/v1.3/markers/b/mark_bs.png',
          title: item.name,
          anchor: 'bottom-left', // 设置锚点方位
          extData: item,
        })
        //点击地图图标
        // 将组件实例赋值给vm
        let vm = this
        marker.on('click', function () {
          //打印点击地图图标的数据
          // console.log(this.getExtData(), '-----')
        })
        map.add(marker) //添加到地图
      })

      
    },
},
mounted() {
      this.getEmp();
    },
}
</script>
<style>
.amap-icon img {
  width: 24px;
  height: 30px;
}
</style>